import React, { useEffect, useState } from 'react'

// 研究：清理函数的执行时机
// useEffect 没有写第 2 个参数，useEffect 第二个参数写了相关的依赖项
// 副作用函数被调用了，清理函数就会执行（不包括初始化的时候）
// 组件销毁的时候会执行
// useEffect 第二个参数为空数组
// 只有组件销毁的时候会走

// !组件销毁会执行清理函数，副作用函数被调用也会执行清理函数

export default function Test() {
  const [count, setCount] = useState(0)
  useEffect(() => {
    console.log('副作用函数执行了')
    return () => {
      // 清理函数：一般在里面清理副作用
      console.log('清理函数执行了~~~~')
    }
  }, [])
  return (
    <div>
      Test: {count}
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  )
}
